<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-16 13:46:18
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-17 10:24:50
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${item.name ? '编辑' : '创建'}任务`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form ref="form" :model="model" :rules="rules" label-position="top">
      <el-form-item label="名称" prop="name">
        <el-input v-model="model.name" placeholder="名称"></el-input>
      </el-form-item>

      <el-form-item label="应用" prop="applicationId">
        <el-select
          v-model="model.applicationId"
          placeholder="应用"
          style="width: 100%"
        ></el-select>
      </el-form-item>
      <el-form-item label="订阅内容">
        <el-input
          v-model="model.keywords"
          placeholder="多个关键词用英文逗号隔开"
        ></el-input>
      </el-form-item>
      <el-form-item label="执行日期">
        <el-radio-group v-model="model.date">
          <el-radio label="DAY">每天</el-radio>
          <el-radio label="WEEK">每周</el-radio>
          <el-radio label="MONTH">每月</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="model.date === 'WEEK'"
        key="WEEK"
        style="margin-top: -16px"
      >
        <el-checkbox-group v-model="model.week">
          <el-checkbox label="1">星期一</el-checkbox>
          <el-checkbox label="2">星期二</el-checkbox>
          <el-checkbox label="3">星期三</el-checkbox>
          <el-checkbox label="4">星期四</el-checkbox>
          <el-checkbox label="5">星期五</el-checkbox>
          <el-checkbox label="6">星期六</el-checkbox>
          <el-checkbox label="7">星期日</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        v-if="model.date === 'MONTH'"
        key="MONTH"
        style="margin-top: -16px"
      >
        <el-checkbox-group v-model="model.month">
          <el-checkbox v-for="d in 31" :key="d" :label="d" style="width: 48px">
            {{ d }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="执行时间" prop="time">
        <el-time-picker
          v-model="model.time"
          placeholder="执行时间"
          style="width: 100%"
        ></el-time-picker>
      </el-form-item>
    </el-form>
  </drawer-frame>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {
        date: 'DAY',
        week: [],
        month: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        applicationId: [
          {
            required: true,
            message: '请选择应用',
            trigger: 'change',
          },
        ],
        time: [
          {
            required: true,
            message: '请选择执行时间',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    if (this.item.name) {
      this.model = {
        ...this.item,
        keywords: this.item.keywords.join(','),
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate()
    },
  },
}
</script>
